<template>
	<view class="index">
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<view class="u-page__tag-item">
					<u-search v-model="keyword" placeholder="请输入车牌号" @custom="keywordSearch"></u-search>
				</view>
			</view>
		</view>
		<view class="list_item_wrap">
			<view class="list_item" v-for="item in list" :key="item.vehicleId">
				<img :src="item.vehiclePic" alt="">
				<view class="info">
					<view class="top">
						<view class="name bt">
							<text>车牌号：</text>
							{{item.carNumber}}
						</view>
						<view class="brand bt">
							<text>品牌：</text>
							{{item.vechiceBrand}}
						</view>
						<view class="color bt">
							<text>颜色：</text>
							{{item.vechiceColor}}
						</view>
						<view class="sex bt">
							<text>状态：</text>
							{{item.state | stateName}}
						</view>
					</view>
					<view class="date">
						<u-icon name="clock"></u-icon>
						<text>生产日期： {{item.productionYear}}</text>
					</view>
					<view class="date">
						<u-icon name="clock"></u-icon>
						<text>报废日期： {{item.scrapTime}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {manageVehicleList, manageVehicleList2, delVehicle} from '../../../common/api'
export default {
	data() {
		return {
			list: [],
			keyword: ''
		}
	},
	filters: {
		stateName: function (value) {
			if(value == 0){
				return '可用'
			} else if(value == 1) {
				return '维修中'
			} else if(value == 2) {
				return '已预约'
			} else if(value == 3) {
				return '已考试'
			} else if(value == 4) {
				return '已停用'
			}
		}
	},
	onLoad() {
		this.getManageVehicleList()
	},
	methods: {
		keywordSearch(){
			console.log(this.keyword);
			this.getManageVehicleList2(this.keyword)
		},
		onCreateClassHour(id) {
			uni.navigateTo({
				url: `/pages/createClassHour/createClassHour?id=${id}`
			});
		},
		async getManageVehicleList(){
			let res = await manageVehicleList()
			this.list = res
		},
		async getManageVehicleList2(name){
			let res = await manageVehicleList2(name)
			this.list = res
		},
		onCar(){
			uni.navigateTo({
				url: '/pages/newCar/newCar'
			});
		},
		async onDelete(id){
			let res = await delVehicle(id)
			uni.$u.toast('删除成功')
			this.getManageVehicleList()
		},
		onModify(id){
			uni.navigateTo({
				url: `/pages/newCar/newCar?id=${id}`
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.index {
	.u-demo-block {
		margin: 32rpx;	
	}
	.add_button {
		margin: 32rpx;
		width: 200rpx;
	}

	.list_item_wrap {
		margin: 32rpx;
		padding-bottom: 50rpx;

		.list_item {
			background: #f5f5f5;
			padding: 20rpx;
			border-radius: 20rpx;
			margin-bottom: 32rpx;

			img {
				width: 100%;
				height: 400rpx;
				border-radius: 20rpx;
				object-fit: cover;
			}

			.info {
				margin-top: 20rpx;
				display: flex;
				flex-flow: column;
				justify-content: space-between;

				.top {
					font-size: $uni-font-size-small;
					font-weight: bold;

					text {
						font-weight: $uni-font-font-weight;
						color: $uni-color-type1;
					}

					.bt {
						margin-bottom: 8rpx;
					}
				}

				.date {
					display: flex;
					color: $uni-color-type1;
					font-size: $uni-font-size-mini;
					margin-top: 15rpx;

					text {
						margin-left: 10rpx;
					}
				}
			}
			.button_set {
				display: flex;
				justify-content: end;
				margin-top: 30rpx;
				.u-page__button-item {
					margin-left: 15rpx;
				}
			}
		}

	}
}
</style>
